// 订单管理
import styles from './index.less';
import classNames from 'classnames';
import { Form, Input, Button, Select, DatePicker, Pagination } from 'antd';
import { ClockCircleOutlined, SearchOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import { OrderModelState, useDispatch, useSelector } from 'umi';
import { Iorder } from '@/types';
const { RangePicker } = DatePicker;
const { Option } = Select;
const OrderOrder = () => {
  const dispatch = useDispatch();
  const { orderData, total } = useSelector(
    (state: { order_order: OrderModelState }) => state.order_order,
  );
  const [current, setCurrent] = useState(1);
  const [size, setSize] = useState(10);
  const [form] = Form.useForm();
  const [orderNumber, setOrderNumber] = useState('');
  const [status, setStatus] = useState('');
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');
  const onFinish = (values: any) => {
    setOrderNumber(values.orderNumber);
    setStatus(values.status);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const onReset = () => {
    form.resetFields();
  };
  useEffect(() => {
    let obj = { current, size, startTime, endTime, orderNumber, status };
    for (let key in obj) {
      if (!obj[key]) {
        delete obj[key];
      }
    }
    dispatch({
      type: 'order_order/GetOrder',
      payload: obj,
    });
  }, [current, size, orderNumber, status, startTime, endTime]);
  const onShowSizeChange = (current: number, pageSize: number) => {
    setCurrent(current);
    setSize(pageSize);
  };
  const onChangePage = (e: number) => {
    setCurrent(e);
  };
  return (
    <div>
      <Form  form={form}  name="basic"  onFinish={onFinish}  onFinishFailed={onFinishFailed}  className={styles.order_form}>
        <Form.Item name="orderNumber" className={styles.order_formList}>
          <Input placeholder="订单编号" className={styles.orderInp} />
        </Form.Item>
        <Form.Item className={styles.order_formList} name="startTime">
          <Input.Group className={styles.timeGrop}>
            <Input  className={styles.timeIcon}  prefix={<ClockCircleOutlined />}/>
            <RangePicker
              placeholder={['开始日期', '结束日期']}
              className={styles.timeSelect}
              showTime
              onChange={(value, mode) => {
                setStartTime(mode[0]);
                setEndTime(mode[1]);
              }}
            />
          </Input.Group>
        </Form.Item>
        <Form.Item  name="status"  className={classNames(styles.order_formList, styles.order_select)}>
          <Select placeholder="请选择订单状态" className={styles.selectInp}>
            <Option value="1" className={styles.seOption}> 待付款</Option>
            <Option value="2">待发货</Option>
            <Option value="3">待收货</Option>
            <Option value="4">待评价</Option>
            <Option value="5">成功</Option>
            <Option value="6">失败</Option>
          </Select>
        </Form.Item>

        <Form.Item  className={classNames(styles.order_formList, styles.option_btn)}>
          <Button type="primary" htmlType="submit" className={styles.order_btn}>
            <SearchOutlined />查询 
          </Button>
          <Button type="primary" className={styles.order_btn}>
            导出待发货订单
          </Button>
          <Button type="primary" className={styles.order_btn}>
            导出销售记录
          </Button>
          <Button  htmlType="button"  onClick={onReset}  className={styles.order_clear}>
            清空
          </Button>
        </Form.Item>
      </Form>
      <div className={styles.order_list}>
        <div className={styles.order_title}>
          <div className={styles.order_title_box}>
            <div className={classNames(styles.order_shop, styles.shop_one)}>
              <span className={styles.shop_item}>商品</span>
            </div>
            <div className={classNames(styles.order_shop, styles.shop_two)}>
              <span className={styles.shop_item}>成交单价/购买数量</span>
            </div>
            <div className={classNames(styles.order_shop, styles.shop_two)}>
              <span className={styles.shop_item}>实付金额</span>
            </div>
            <div className={classNames(styles.order_shop, styles.shop_two)}>
              <span className={styles.shop_item}>支付方式</span>
            </div>
            <div className={classNames(styles.order_shop, styles.shop_two)}>
              <span className={styles.shop_item}>订单状态</span>
            </div>
            <div className={classNames(styles.order_shop, styles.shop_three)}>
              <span className={styles.shop_item}>操作</span>
            </div>
          </div>
        </div>
        {orderData.map((item: Iorder) => {
          return (
            <div className={styles.prod} key={item.addrOrderId}>
              <div className={styles.prod_tit}>
                <span>订单编号：{item.orderNumber}</span>
                <span>下单时间：{item.createTime}</span>
              </div>
              <div className={styles.order_cat}>
                {item.orderItems.map((ite) => {
                  return (
                    <div key={ite.orderItemId} className={styles.order_wrap}>
                      <div
                        className={classNames(
                          styles.orders_wrap,
                          styles.orders_wrap_12,
                        )}
                      >
                        <div className={styles.order_item}>
                          <div className={styles.items}>
                            <div className={styles.order_img}>
                              <img
                                src={`http://img-test.gz-yami.com/${ite.pic}`}
                                alt=""
                              />
                            </div>
                            <div className={styles.order_name}>
                              <span>{ite.prodName}</span>
                              <span></span>
                            </div>
                            <div className={styles.order_price}>
                              <span>￥{ite.price}</span>
                              <span>X{ite.prodCount}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        className={classNames(
                          styles.orders_wrap,
                          styles.orders_wrap_3,
                        )}
                      >
                        <div className={styles.items}>
                          <div className={styles.price_cont}>
                            <span>￥{ite.price}</span>
                            <span>共{ite.prodCount}件</span>
                          </div>
                        </div>
                      </div>
                      <div
                        className={classNames(
                          styles.orders_wrap,
                          styles.orders_wrap_3,
                        )}
                      >
                        <div className={styles.items}>
                          <span>手动代付</span>
                        </div>
                      </div>
                      <div
                        className={classNames(
                          styles.orders_wrap,
                          styles.orders_wrap_3,
                        )}
                      >
                        <div className={styles.items}>
                          <span>{item.statusStr}</span>
                        </div>
                      </div>
                      <div
                        className={classNames(
                          styles.orders_wrap,
                          styles.orders_wrap_3,
                        )}
                      >
                        <div className={styles.items}>
                          <span className={styles.order_edit}>修改</span>
                        </div>
                      </div>
                    </div>
                  );
                })}
                <div></div>
              </div>
              <div className={styles.remark}>
                <div className={styles.buyer_remark}>
                  <span>备注:</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div className={styles.order_foot}>
        <span className={styles.total_sum}>共{total}条</span>
        <Pagination
          showQuickJumper
          current={current}
          total={total}
          onShowSizeChange={onShowSizeChange}
          onChange={onChangePage}
        />
      </div>
    </div>
  );
};

export default OrderOrder;
